<template>
    <div class="pad20">
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="map" size="mini">
                <el-form-item label="商品名称：">
                    <el-input v-model.trim="map.goodsname"></el-input>
                </el-form-item>
                <el-form-item label="选择店铺">
                    <el-select v-model="map.shopid" placeholder="按店铺名称搜索">
                        <el-option  v-for="shop in shops" :label="shop.name" :value="shop.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="map.state" placeholder="审核状态">
                        <el-option label="审核通过" value="1"></el-option>
                        <el-option label="待审核" value="0"></el-option>
                        <el-option label="审核驳回" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog title="审核驳回" :visible.sync="rejectFormVisible">

            <el-form :model="rejectForm">
                <el-form-item label="拒绝理由" label-width="140px">
                    <el-input v-model="msg" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rejectFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addReason">确 定</el-button>
            </div>
        </el-dialog>
        <!--  表格 -->
        <template>
            <el-table
                    :data="list"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品进价:" style="margin-left: 20px">
                                <span>{{ props.row.enterprice}}</span>
                            </el-form-item>
                            <el-form-item label="商品品牌:" style="margin-left: 140px">
                                <span>{{ props.row.brand.brandname }}</span>
                            </el-form-item>
                            <br />
                            <el-form-item label="商品类别:" style="margin-left: 20px">
                                <span>{{ props.row.category.categoryname}}</span>
                            </el-form-item>
                            <el-form-item label="申请时间:" style="margin-left: 140px">
                                <span>{{ props.row.checkgoods.gmtCreate}}</span>
                            </el-form-item>
                            <br />
                            <el-form-item label="描述:" style="margin-left: 20px">
                                <span>{{ props.row.description}}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="编号"
                        prop="id" width="100px" align="center">
                </el-table-column>
                <el-table-column
                        label="商品名称"
                        prop="goodsname" width="120px" align="center">
                </el-table-column>
                <el-table-column
                        label="商品图片"
                        align="center"
                        width="160">
                    <template slot-scope="scope">
                        <img :src="scope.row.img"
                             style="width: 50px;height: 50px"
                             alt="">
                    </template>
                </el-table-column>

                <el-table-column prop="deposit.depositname" label="储存方式" align="center" width="120">
                </el-table-column>
                <el-table-column prop="outprice" label="售价" align="center" width="100">
                </el-table-column>
                <el-table-column prop="spec.specname" label="规格" align="center" width="100">
                </el-table-column>
                <el-table-column prop="shop.name" label="所属店铺" align="center" width="120">
                </el-table-column>
                <el-table-column
                        label="审核状态"
                        prop="state"
                        width="140"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state === 2"><el-tag type="warning">审核驳回</el-tag></span>
                        <span v-if="scope.row.state === 1"><el-tag type="success">审核通过</el-tag></span>
                        <span v-if="scope.row.state === 0"><el-tag type="danger">待审核</el-tag></span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="审核人"
                        prop="emp.nickName" width="120px" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.state!=0"  type="primary" @click="handleCheckCourse(scope.row)" size="mini">通过</el-button>
                        <el-button :disabled="scope.row.state!=0" type="danger" @click="handleRejectGoods(scope.row)" size="mini">驳回</el-button>
                    <!--<span v-show="scope.row.state==1">
                        <el-button  type="primary" @click="handleCheckCourse(scope.row)" size="mini">通过</el-button>
                        <el-button  type="danger" @click="handleRejectGoods(scope.row)" size="mini">驳回</el-button>
                    </span>-->
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "courseCheck",
        data() {
            return {
                msg:"",
                //
                form:{},
                editorOption:{},
                editor: {},
                dialogVisible: false,
                editVisible: false,
                visible: false,
                checkvisible:false,
                map: {},
                brands:{},
                formData: {},
                checkformData:{},
                rejectFormVisible:false,
                rejectForm:{},
                list: [],
                /*分页*/
                pageSizes:[5,10,15,20],
                currentPage:1,
                pageSize:5,
                total:0,
            }
        },
        created() {
            this.searchCourse();
            this.shopSelect();
        },
        methods: {
            // 分类分页列表接口 初始化表格
            searchCourse(){
                this.$http.post("/goods/goods/checkpaging?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.map).then(resp=> {
                    if (resp.data.code==2000){
                        this.list = resp.data.data.list;
                        this.total = resp.data.data.total
                    }
                })
            },
            //查询
            handleCheck() {
                this.searchCourse()
            },
            // 重置查询条件
            handleReset() {
                this.reload();
            },
            /*分页*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.searchCourse();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.searchCourse();
            },
            // 刷新当前页面
            reload() {
                this.map = {}
                this.formData = {}
                this.searchCourse()
            },
            //通过审核
            handleCheckCourse(row){
                this.list=row;
                this.list.checkgoods.state=1;
                this.$http.post("/goods/checkgoods/checkgoodsremark",this.list).then(res=>{
                    if(res.data.code===2000){
                        this.$message.success("审核通过")
                        this.searchCourse();
                    }
                })
            },
            /*店铺下拉功能*/
            shopSelect(){
                this.$http.post("/goods/shop/shop").then(res=>{
                    this.shops = res.data.data;
                })
            },
            //驳回弹窗
            handleRejectGoods(row){
                this.rejectFormVisible = true;
                this.rejectForm = row;
            },
            //审核驳回
            addReason(){
                this.rejectForm.checkgoods.remark=this.msg
                console.log(this.rejectForm.checkgoods.remark)
                this.rejectForm.checkgoods.state=2;
                this.$http.post("/goods/checkgoods/checkgoodsremark",this.rejectForm).then(res=>{
                    if(res.data.code===2000){
                        this.rejectFormVisible = false;
                        this.$message.error("审核已驳回")
                        this.searchCourse();
                    }
                })
            },
        }

    }
</script>

<style scoped>

</style>
